<template>
	<view class="coupon-box flex">
		<view class="tabList w100">
			<up-tabs :current="contentIndex" @change="changeTab" :activeStyle="{
				'fontWeight': 'bold',
				'fontSize': '30rpx',
				'color': 'rgba(255,255,255,0.87)'
			}" lineColor="linear-gradient( 270deg, #7EDE9E 0%, #66DEC2 47%, #5CCCC0 100%)" :inactiveStyle="{
			 	'fontWeight': 500,
			 	'fontSize': '30rpx',
			 	'color': 'rgba(255,255,255,0.6)'
			 }" :list="tabList"></up-tabs>
		</view>
		<view class="content w100">
			<swiper class="swiper-content w100" @change="changeSwiper" :current="contentIndex">
				<!-- 待接单 -->
				<swiper-item class="swiper-content-item w100">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @refresherrefresh="onRefresh"
						refresher-default-style="white" :refresher-enabled="true" :refresher-triggered="triggered"
						@scrolltolower="getMoreOrder">
						<view class="w100" style="padding: 20rpx 30rpx;">
							<template v-if="acceptOrder.list.length>0">
								<view class="content-list" v-for="(item,index) in acceptOrder.list" :key="item.id">
									<orderItemVue @closeList="closeList" :orderInfo="item"></orderItemVue>
								</view>
								<view class="view-more" @click="getMoreOrder">
									<up-loadmore :status="acceptOrder.status" />
								</view>
							</template>
							<view class="not-list-view" v-else>
								<text class="text">暂无待接单订单~</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 待处理 -->
				<swiper-item class="swiper-content-item w100">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @refresherrefresh="onRefresh"
						refresher-default-style="white" :refresher-enabled="true" :refresher-triggered="triggered"
						@scrolltolower="getMoreOrder">
						<view class="w100" style="padding: 20rpx 30rpx;">
							<template v-if="handleOrder.list.length>0">
								<view class="content-list" v-for="(item,index) in handleOrder.list" :key="index">
									<orderItemVue @closeList="closeList" :orderInfo="item"></orderItemVue>
								</view>
								<view class="view-more" @click="getMoreOrder">
									<up-loadmore :status="handleOrder.status" />
								</view>
							</template>
							<view class="not-list-view" v-else>
								<text class="text">暂无待处理订单~</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 已取消 -->
				<swiper-item class="swiper-content-item w100">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @refresherrefresh="onRefresh"
						refresher-default-style="white" refresher-enabled :refresher-triggered="triggered"
						@scrolltolower="getMoreOrder">
						<view class="w100" style="padding: 20rpx 30rpx;">
							<template v-if="closeOrder.list.length>0">
								<view class="content-list" v-for="(item,index) in closeOrder.list" :key="index">
									<orderItemVue type="expire" :orderInfo="item"></orderItemVue>
								</view>
								<view class="view-more" @click="getMoreOrder">
									<up-loadmore :status="closeOrder.status" />
								</view>
							</template>
							<view class="not-list-view" v-else>
								<text class="text">暂无已取消订单~</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 已开始 -->
				<swiper-item class="swiper-content-item w100">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @refresherrefresh="onRefresh"
						refresher-default-style="white" refresher-enabled :refresher-triggered="triggered"
						@scrolltolower="getMoreOrder">
						<view class="w100" style="padding: 20rpx 30rpx;">
							<template v-if="startOrder.list.length>0">
								<view class="content-list" v-for="(item,index) in startOrder.list" :key="item.id">
									<orderItemVue @closeList="closeList" :orderInfo="item"></orderItemVue>
								</view>
								<view class="view-more" @click="getMoreOrder">
									<up-loadmore :status="startOrder.status" />
								</view>
							</template>
							<view class="not-list-view" v-else>
								<text class="text">暂无已开始订单~</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 已完成 -->
				<swiper-item class="swiper-content-item w100">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @refresherrefresh="onRefresh"
						refresher-default-style="white" refresher-enabled :refresher-triggered="triggered"
						@scrolltolower="getMoreOrder">
						<view class="w100" style="padding: 20rpx 30rpx;">
							<template v-if="completeOrder.list.length>0">
								<view class="content-list" v-for="(item,index) in completeOrder.list" :key="item.id">
									<orderItemVue @closeList="closeList" :orderInfo="item"></orderItemVue>
								</view>
								<view class="view-more" @click="getMoreOrder">
									<up-loadmore :status="completeOrder.status" />
								</view>
							</template>
							<view class="not-list-view" v-else>
								<text class="text">暂无已完成订单~</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import orderItemVue from '../components/orderItem.vue';
	const contentIndex = ref(0)
	const loadingIndex = []; //已经加载得item
	const tabList = [{
			name: '全部'
		},
		{
			name: '待处理'
		},
		{
			name: '已取消'
		},
		{
			name: '已开始'
		},
		{
			name: '已完成'
		}
	];
	const triggered = ref(false);
	const acceptOrder = reactive({ //待接单
		list: [],
		page: 1,
		status: 'loadmore',
	});
	const handleOrder = reactive({ //待处理
		list: [],
		page: 1,
		status: 'loadmore'
	});
	const closeOrder = reactive({ //取消
		list: [],
		page: 1,
		status: 'loadmore'
	});
	const startOrder = reactive({ //开始
		list: [],
		page: 1,
		status: 'loadmore'
	});
	const completeOrder = reactive({ //完成
		list: [],
		page: 1,
		status: 'loadmore'
	})
	onLoad((option) => {
		if (option.index != null && option.index != undefined) {
			contentIndex.value = option.index
		}
		changeIndex(contentIndex.value)
		loadingIndex.push(Number(contentIndex.value))
	})
	const getMoreOrder = () => {
		let e = contentIndex.value;
		if (e == 0) {
			if (acceptOrder.status == 'loading' || acceptOrder.status == 'nomore') return;
			acceptOrder.status = 'loading';
			setTimeout(() => {
				getAcceptOrder()
			}, 300)
		} else if (e == 1) {
			if (handleOrder.status == 'loading' || handleOrder.status == 'nomore') return;
			handleOrder.status = 'loading';
			setTimeout(() => {
				getHandleOrder()
			}, 300)
		} else if (e == 2) {
			if (closeOrder.status == 'loading' || closeOrder.status == 'nomore') return;
			closeOrder.status = 'loading';
			setTimeout(() => {
				getCloseOrder()
			}, 300)
		} else if (e == 3) {
			if (startOrder.status == 'loading' || startOrder.status == 'nomore') return;
			startOrder.status = 'loading';
			setTimeout(() => {
				getStartOrder()
			}, 300)
		} else if (e == 4) {
			if (completeOrder.status == 'loading' || completeOrder.status == 'nomore') return;
			completeOrder.status = 'loading';
			setTimeout(() => {
				getCompleteOrder()
			}, 300)
		}

	}
	const getAcceptOrder = async () => { //带接单
		const res = await $Api.user.getAssistantOrder({
			page: acceptOrder.page,
			status: -1
		})
		setTimeout(() => { //重置下拉刷新
			triggered.value = false;
		}, 300)
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				let arr = []
				arr = res.data.list.map(val => {
					if (val.extends && val.extends.distance) {
						val.extends.distance = parseFloat(val.extends.distance).toFixed(2)
					}
					return {
						...val,
					}
				})
				acceptOrder.list = [...acceptOrder.list, ...arr];
			}
			if (res.data.totalPage > acceptOrder.page) {
				acceptOrder.status = 'loadmore';
				acceptOrder.page++;
			} else {
				acceptOrder.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg)
		}
	};
	const getHandleOrder = async () => { //待处理
		const res = await $Api.user.getAssistantOrder({
			page: handleOrder.page,
			status: 1
		})
		setTimeout(() => { //重置下拉刷新
			triggered.value = false;
		}, 300)
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				let arr = []
				arr = res.data.list.map(val => {
					if (val.extends && val.extends.distance) {
						val.extends.distance = parseFloat(val.extends.distance).toFixed(2)
					}
					return {
						...val,
					}
				})
				handleOrder.list = [...handleOrder.list, ...arr];
			}
			if (res.data.totalPage > handleOrder.page) {
				handleOrder.status = 'loadmore';
				handleOrder.page++;
			} else {
				handleOrder.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg)
		}
	}
	const getCloseOrder = async () => { //获取取消订单
		const res = await $Api.user.getAssistantOrder({
			page: closeOrder.page,
			status: 2
		})
		setTimeout(() => { //重置下拉刷新
			triggered.value = false;
		}, 300)
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				let arr = []
				arr = res.data.list.map(val => {
					if (val.extends && val.extends.distance) {
						val.extends.distance = parseFloat(val.extends.distance).toFixed(2)
					}
					return {
						...val,
					}
				})
				closeOrder.list = [...closeOrder.list, ...arr];
			}
			if (res.data.totalPage > closeOrder.page) {
				closeOrder.status = 'loadmore';
				closeOrder.page++;
			} else {
				closeOrder.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg)
		}
	}
	const getStartOrder = async () => { //获取已开始
		const res = await $Api.user.getAssistantOrder({
			page: startOrder.page,
			status: 3
		})
		setTimeout(() => { //重置下拉刷新
			triggered.value = false;
		}, 300)
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				let arr = []
				arr = res.data.list.map(val => {
					if (val.extends && val.extends.distance) {
						val.extends.distance = parseFloat(val.extends.distance).toFixed(2)
					}
					return {
						...val,
					}
				})
				startOrder.list = [...startOrder.list, ...arr];
			}
			if (res.data.totalPage > startOrder.page) {
				startOrder.status = 'loadmore';
				startOrder.page++;
			} else {
				startOrder.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg)
		}
	}
	const getCompleteOrder = async () => { //已完成订单
		const res = await $Api.user.getAssistantOrder({
			page: completeOrder.page,
			status: 4
		})
		setTimeout(() => { //重置下拉刷新
			triggered.value = false;
		}, 300)
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				let arr = []
				arr = res.data.list.map(val => {
					if (val.extends && val.extends.distance) {
						val.extends.distance = parseFloat(val.extends.distance).toFixed(2)
					}
					return {
						...val,
					}
				})
				completeOrder.list = [...completeOrder.list, ...arr];
			}
			if (res.data.totalPage > completeOrder.page) {
				completeOrder.status = 'loadmore';
				completeOrder.page++;
			} else {
				completeOrder.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg)
		}
	}
	const restList = () => {
		let e = contentIndex.value;
		if (e == 0) {
			acceptOrder.list = [];
			acceptOrder.page = 1;
			acceptOrder.status = 'loadmore';
		} else if (e == 1) {
			handleOrder.list = [];
			handleOrder.page = 1;
			handleOrder.status = 'loadmore';
		} else if (e == 2) {
			closeOrder.list = [];
			closeOrder.page = 1;
			closeOrder.status = 'loadmore';
		} else if (e == 3) {
			startOrder.list = [];
			startOrder.page = 1;
			startOrder.status = 'loadmore';
		} else if (e == 4) {
			completeOrder.list = [];
			completeOrder.page = 1;
			completeOrder.status = 'loadmore';
		}

	}
	const changeSwiper = (e) => {
		let index = e.detail.current;
		contentIndex.value = index;
		triggered.value = false;
		if (loadingIndex.includes(index)) return;
		loadingIndex.push(index)
		changeIndex(index)
	}
	const changeTab = (e) => {
		contentIndex.value = e.index
	}
	const onRefresh = () => { //下拉刷新
		if (triggered.value) return;
		triggered.value = true;
		restList()
		changeIndex(contentIndex.value)
	};
	const changeIndex = (e) => {
		if (e == 0) {
			getAcceptOrder()
		} else if (e == 1) {
			getHandleOrder()
		} else if (e == 2) {
			getCloseOrder()
		} else if (e == 3) {
			getStartOrder()
		} else if (e == 4) {
			getCompleteOrder()
		}
	}
	const closeList = ({
		status,
		id
	}) => {
		if (status == 0) {
			acceptOrder.list = acceptOrder.list.filter(val => val.id != id)
		} else if (status == 1) {
			handleOrder.list = handleOrder.list.filter(val => val.id != id)
		} else if (status == 2) {
			closeOrder.list = closeOrder.list.filter(val => val.id != id)
		} else if (status == 3) {
			startOrder.list = startOrder.list.filter(val => val.id != id)
		} else if (status == 4) {
			completeOrder.list = completeOrder.list.filter(val => val.id != id)
		}
	}
</script>
<style>
	/deep/ .u-tabs__wrapper__nav {
		justify-content: space-between;
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: 0;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
	}
</style>
<style lang="scss" scoped>
	.coupon-box {
		flex-direction: column;
		height: 100vh;

		.content {
			flex: 1;
			// padding: 20rpx 0;
			box-sizing: border-box;
		}

		.swiper-content {
			height: 100%;
		}

		.swiper-content-item {
			height: 100%;

			.content-list {
				margin-bottom: 28rpx;
			}
		}
	}
</style>